<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-07-01 11:23:53
 * @LastEditors: william
 * @LastEditTime: 2025-10-27 16:29:36
-->
<template>
  <CustomModal
    title="调料盒修改"
    v-model="visible"
    :showCancelButton="false"
    confirmText="确定"
    @confirm="modelConfirm"
  >
    <up-toast ref="uToastRef" />
    <scroll-view class="scroll-content" scroll-y>
      <uni-forms ref="uFormRef" :modelValue="formData" :rules="rules">
        <view class="forms-title">{{ formData.name }}</view>
        <uni-forms-item>
          <template #label>
            <view class="nw-label">启用状态</view>
          </template>
          <view class="nw-value-wrap">
            <view
              :class="[
                'nw-value',
                {
                  error: !formData.switchStatus
                }
              ]"
            >
              {{ formData.switchStatus ? '启用' : '停用' }}
            </view>
            <nw-Switch v-model="formData.switchStatus"></nw-Switch>
          </view>
        </uni-forms-item>
        <uni-forms-item>
          <template #label>
            <view class="nw-label">通信状态</view>
          </template>
          <view
            :class="[
              'nw-value',
              {
                error: !formData.control
              }
            ]"
          >
            {{ formData.control ? '正常' : '异常' }}
          </view>
        </uni-forms-item>
        <uni-forms-item name="ingredientName">
          <template #label>
            <view class="nw-label">调料名称</view>
          </template>
          <view class="uss-form-select">
            <!-- <zxz-uni-data-select
              v-model="formData.ingredientCode"
              :localdata="seasonList"
              placeholder="选择"
              :emptyTips="$t('system.noOption')"
              :clear="false"
              dataKey="label"
              dataValue="value"
              @change="handleRoleChange"
            ></zxz-uni-data-select> -->
            <nw-PickerSelect
              v-model="formData.ingredientCode"
              :columns="seasonList"
              :text="formData.ingredientName"
              style="width: 100%; max-width: 100%"
              @confirm="handleActionSelectConfirm"
            />
          </view>
        </uni-forms-item>
        <uni-forms-item name="ingredientRemain">
          <template #label>
            <view class="nw-label">调料余量</view>
          </template>
          <nw-Input v-model.number="formData.ingredientRemain" label="调料余量">
            <template #right>
              <view class="nw-input-right">
                <view class="unit">
                  {{
                    g_options.getOptionText(
                      g_options.weightUnitOptions,
                      weightUnitValue,
                      ''
                    )
                  }}
                </view>
              </view>
            </template>
          </nw-Input>
        </uni-forms-item>
      </uni-forms>
    </scroll-view>
  </CustomModal>
</template>

<script setup>
defineOptions({
  name: 'IngredientBox',
  inheritAttrs: false
})

const props = defineProps({
  deviceSn: {
    type: String,
    default: ''
  },
  row: {
    type: Object,
    default: () => {}
  },
  seasonCodeList: {
    type: Array,
    default: () => []
  }
})
const visible = defineModel({
  type: Boolean,
  default: false
})
const emit = defineEmits(['update'])

const { bindDeviceList } = storeToRefs(useDeviceStore())
const recipeStore = useRecipeStore()
const { recipeCategoryList } = storeToRefs(recipeStore)
const uToastRef = ref(null)
const uFormRef = ref(null)
const formData = ref({
  ...props.row,
  ingredientCode: [props.row.ingredientCode],
  switchStatus: props.row.status === 1
})
const weightUnitValue = ref(
  props.row.type === 2 || props.row.type === 4 ? 0 : 1
)
// 校验规则
const rules = {
  ingredientName: {
    rules: g_rules.singleLineText('调料名称')
  },
  ingredientRemain: {
    rules: g_rules.ingredientRemain('调料余量', weightUnitValue.value)
  }
}
// 寻找所有的调料名称数据
// const findSeasonList = (obj, ingredientCode) => {
//   let arr = []
//   for (let key in obj) {
//     if (obj[key].value === ingredientCode) return obj
//     if (obj[key]?.ingredientList?.length) {
//       const found = findSeasonList(obj[key].ingredientList, ingredientCode)
//       if (found.length) return found
//     }
//   }
//   return arr
// }

const seasonList = computed(_ => {
  const dataList =
    recipeCategoryList.value
      .find(item => item.value === 'flavour')
      .ingredientList?.filter(
        item => !props.seasonCodeList.includes(item.value)
      ) || []
  return [dataList]
})

onMounted(_ => {
  recipeStore.setRecipeCategoryList()
})

// const handleRoleChange = e => {
//   console.log('handleRoleChange:', e)
//   formData.value.ingredientName = e.label
// }

const modelConfirm = _ => {
  uFormRef.value
    .validate()
    .then(res => {
      const deviceObj = bindDeviceList.value.find(
        item => item.sn === props.deviceSn
      )
      deviceObj.peripheralList.find(item => {
        if (item.driverId === props.row.driverId) {
          item.status = formData.value.switchStatus ? 1 : 0
          item.ingredientCode = formData.value.ingredientCode[0] || ''
          item.ingredientName = formData.value.ingredientName
          item.ingredientRemain = formData.value.ingredientRemain
          emit('update')
          visible.value = false
          return true
        }
      })
    })
    .catch(err => {
      console.log('err', err)
    })
}

const handleActionSelectConfirm = e => {
  console.log('handleActionSelectConfirm', e)
  const data = e.value.filter(i => i)
  const checkedNode = data[data.length - 1]
  formData.value.ingredientCode = checkedNode?.value ? [checkedNode.value] : []
  formData.value.ingredientName = checkedNode?.label || ''
}
</script>

<style lang="scss" scoped>
:deep(.uni-forms) {
  padding-bottom: 26rpx;
}

.forms-title {
  height: 46rpx;
  line-height: 46rpx;
  margin: 44rpx 0;
  text-align: center;
  font-size: 22rpx;
  font-weight: bold;
  color: var(--color-333);
  background-color: var(--body-theme);
}

.nw-label {
  width: 108rpx;
}

.nw-value-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.nw-value {
  display: flex;
  align-items: center;
  height: 40rpx;
  margin-left: 26rpx;
  font-size: 22rpx;
  font-weight: 400;
  color: var(--color-333);
  &.error {
    color: var(--color-red);
  }
}

.nw-input-right {
  display: flex;
  align-items: center;
  padding-right: 10rpx;
  .unit {
    margin: 0 8rpx;
    font-size: 18rpx;
    font-weight: 400;
    color: var(--color-333);
  }
}

// zxz-uni-data-select多选择框-样式
.uss-form-select {
  :deep(.nw-picker-container) {
    width: 100%;
    max-width: 100%;
    height: 40rpx;
    min-height: 40rpx;
    .input-text {
      font-size: 22rpx;
    }
  }
  // :deep(.uni-stat__select) {
  //   max-height: 240rpx;
  //   .uni-select {
  //     position: fixed;
  //     z-index: 2;
  //     width: 189 * 2rpx;
  //     background-color: var(--bg-color);
  //     .uni-scroll-view-content {
  //       max-height: 250rpx;
  //     }
  //   }
  // }
}
</style>
